<template>
	<scroll-view class="table-scroll-box" scroll-x scroll-y
		:style="[{height:tableHeight?tableHeight+'rpx':windowHeight+'px'},fontcolor]">
		<view>
			<!-- 表头 -->
			<view class="th-box" :style="[{
			//	position:thFixed?'sticky':'static',
				height:thHeight+'rpx',
				lineHeight:thHeight+'rpx',
				backgroundColor:thBgColor},fontcolor]">
				<view :id="'th'+index" v-for="(item,index) in thList" :key="index" class="th-item" :class="[
						index === 0 && thFirstFixed?'th-first':'']" :style="{
					minWidth:colWidthList.length?colWidthList[index]+'rpx':'120rpx',
					borderColor:borderColor,
					//backgroundColor:index === colCurrent?activeBgColor:thBgColor,
					color:thColor,
					fontSize: thSize + 'rpx',
					fontWeight: thBold?'700':'400'}" @tap="showCol(index)">
					{{item}}
				</view>
			</view>
			<!-- 内容 -->
			<view>
				<slot name="content"><!-- 索引用这个rowi -->
					<view v-for="(rows,rowi) in tbList" :key="rowi" class="rows-box"
						:class="[rowCurrent === rowi?'rowActive':'']" :style="{
							height:tbHeight+'rpx',
							lineHeight:tbHeight+'rpx',
							backgroundColor:tbBgColor?tbBgColor:'#fff',
							color:tbColor?tbColor:'#333',}">

						<view v-for="(col,index) in rows" :key="index"  class="col-item"
							:class="[index === 0 && firstColFixed?'first-col':'']" :style="[{
							minWidth:	colWidthList.length?colWidthList[index]+'rpx':'120rpx',
							borderColor:borderColor,
							//backgroundColor:colCurrent===index?activeBgColor:rowCurrent === rowi?activeBgColor:tbBgColor,
							//color:	colCurrent===index || rowCurrent === rowi?'#fff':tbColor,
							fontSize: tbSize + 'rpx',
							fontWeight: tbBold?'700':'400'},col!='' || index>4 ?bj:bj1]" @tap="showrow(rowi,index)">
							<!-- 生产进度 -->
							<view v-if="thList[index]=='完成率'" style="margin-left: 25%;">	
							  <vus-sphere-progress  :percent="col"></vus-sphere-progress>
							</view> 
							<view v-if="thList[index]=='规格型号' || thList[index]=='物料'">
							 <view style="overflow: hidden;width:300rpx;text-overflow:ellipsis;white-space: nowrap;">{{col}}</view>
							</view> 
							<view v-else>
							{{col}}	
							</view> 
						</view>
					</view>
				</slot>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	/**
	 * 该组件主要是对sticky和scroll-view的使用，注意以下两点即可：
	 * 1、scroll-view里必须要有个根标签且唯一，否则竖向滚动里sticky容器的top属性达不到理想效果；
	 * 2、在scroll-view的横向滚动中使用sticky容器，最好使用width: max-content，否则也可能会出现不理想的效果；
	 * 
	 * @property {String} tableHeight 表格的高度，默认屏幕的高度windowHeight
	 * @property {Array} thList 表头的数据，默认为空数组
	 * @property {Array} colWidthList 每列宽度，默认为空数组
	 * @property {String} thBgColor 表头背景色，默认为白色
	 * @property {String} borderColor 网格线的颜色，默认为#eee,线条为2rpx solid
	 * @property {String} thColor 表头文字颜色，默认为#333
	 * @property {String} thSize 表头文字大小，默认为28，单位为rpx
	 * @property {String} thHeight 表头高度和行高，默认为60，单位为rpx
	 * @property {Boolean} thBold 表头文字粗细，默认为false
	 * @property {Array} tbList 表体的数据，默认为空数组
	 * @property {String} tbBgColor 表体背景色，默认为#fff
	 * @property {String} tbColor 表体文字颜色，默认为#333
	 * @property {String} tbSize 表体文字大小，默认为28，单位为rpx
	 * @property {String} tbHeight 表体每行高度，默认为60，单位为rpx
	 * @property {Boolean} tbBold 表体文字粗细，默认为false
	 * @property {Boolean} thFixed 是否固定表头，默认为true
	 * @property {Boolean} thFirstFixed 表头第一个单元格是否固定，默认为true
	 * @property {Boolean} firstColFixed 是否固定表体第一列，默认为true
	 * @property {String} activeBgColor 选中单元格时的选中背景颜色，默认为#2b85e4
	 * 
	 * @clickHead {Function()} 点击表头时触发 
	 * @cancelHeadActive {Function()} 取消表头点击状态时触发
	 * @clickContent {Function()} 点击表体单元格时触发 
	 * @cancelActive {Function()} 取消表体单元格点击状态时触发
	 * 
	 */
import vusSphereProgress from '../vus-sphere-progress/vus-sphere-progress.vue';		
	export default {
		name: "dataTable",
		props: {
			tableHeight: {
				type: String,
				default: ''
			},
			thList: {
				type: Array,
				default () {
					return []
				}
			},
			colWidthList: {
				type: Array,
				default () {
					return []
				}
			},
			thBgColor: {
				type: String,
				default: 'DarkSlateGray '
			},
			flag: {
				type: String,
				default: '1'
			},
			borderColor: {
				type: String,
				default: 'DarkSlateGray '
			},
			thColor: {
				type: String,
				default: 'DarkSlateGray'
			},
			thSize: {
				type: String,
				default: '28'
			},
			thHeight: {
				type: String,
				default: '50'
			},
			thBold: {
				type: Boolean,
				default: false
			},
			tbList: {
				type: Array,
				default () {
					return []
				}
			},
			tbBgColor: {
				type: String,
				default: '#ffffff'
			},
			tbColor: {
				type: String,
				default: '#000000 '
			},
			tbSize: {
				type: String,
				default: '28'
			},
			tbHeight: {//表格行高
				type: String,
				default: '90'
			},
			tbBold: {
				type: Boolean,
				default: true
			},
			thFixed: {
				type: Boolean,
				default: true
			},
			thFirstFixed: {//固定表头
				type: Boolean,
				default: false
			},
			firstColFixed: {
				type: Boolean,
				default: false
			},
			activeBgColor: {
				type: String,
				default: '#282c35  '
			}
		},
		data() {
			 components: {
			        vusSphereProgress
			 }
			return {
				windowHeight: '',
				colCurrent: '',
				rowCurrent: '',
				fontcolor:{
				BackgroundColor:this.$kdup.color,
				},
				bj:{//有数据
				border:'1px dashed '+this.$kdup.color,
				},
				bj1:{//无数据
				border:'1px dashed #ffffff',
				},
				color: this.$kdup.color
           }
		},
		mounted() {
			this.getTableHeight();
			// if (this.colWidthList.length === 0) {
			// 	this.getColWidth();
			// }
		},
		methods: {
			// 获取屏幕高度
			getTableHeight() {
				// let sysInfo = uni.getSystemInfoSync();
				// this.windowHeight = sysInfo.windowHeight;
			},
			// 获取表头每列的宽度
			async getColWidth() {
				// for (let i in this.thList) {
				// 	let id = "#th" + i;
				// 	let res = await this.selectEle(id);
				// 	this.colWidthList.push(res.width * 2);
				// }
			},
			// 异步查询元素的信息
			selectEle(ele) {
				// let query = uni.createSelectorQuery().in(this);
				// return new Promise((resolve) => {
				// 	query.select(ele).boundingClientRect(res => {
				// 		resolve(res)
				// 	}).exec()
				// })
			},
			// 点击表体
			showCol(i) {
				if (i === this.colCurrent && !this.rowCurrent) {
					this.colCurrent = '';
					this.rowCurrent = '';
					this.$emit('cancelHeadActive',i)
					return
				}else {
					this.rowCurrent = '';
				}
				this.colCurrent = i;
				this.$emit('clickHead',i)
			},
			// 点击表体
			showrow(rowi, coli) {
				if (coli === this.colCurrent && rowi === this.rowCurrent) {
					this.colCurrent = '';
					this.rowCurrent = '';
					this.$emit('cancelActive',[rowi, coli])
					return
				}
				this.colCurrent = coli;
				this.rowCurrent = rowi;
				this.$emit('clickContent',[rowi, coli])
			}

		},
	}
</script>

<style lang="scss" scoped>
	.production{
	margin-right: 13rpx;
	border-radius: 15%;
	}
	.table-scroll-box {
		text-align: center;

		.th-box {
			position: sticky;
			top: 0;
			z-index: 1;
			display: flex;
			width: max-content;

			.th-item {
				border:1rpx solid #eee;
				//border-: 2rpx solid #eee;

			}

			.th-first {
				position: sticky;
				left: 0;
			}

		}

		.rows-box {
			display: flex;
			width: max-content;

			.col-item {
			}

			.first-col {
				position: sticky;
				left: 0;
				background-color: #fff;
			}
		}
	}
</style>
